<template>
    <div>
        <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
        <r-table :isIndex="true" :isPagination="true" :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" @refresh="init()"></r-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            searchData: {
                name:'',
                equipmentNo:'',
                type:'',
                regionalName:'',
                merchantName:''
            },
            searchForm: [
                {
                    type: 'input',
                    prop: 'name',
                    placeholder: '运维人员',
                    width: 150
                },
                {
                    type: 'input',
                    prop: 'equipmentNo',
                    placeholder: '设备编号',
                    width: 150
                },
                {
                    type: 'select',
                    prop: 'type',
                    placeholder: '设备类型',
                    width: 150,
                    options: [
                        {
                            label: '生鲜柜',
                            value: '1'
                        },
                        {
                            label: '组合柜',
                            value: '2',
                        },
                        {
                            label: '自提柜',
                            value: '3',
                        },
                    ]
                },
                {
                    type: 'select',
                    prop: 'regionalName',
                    placeholder: '分配代理商',
                    width: 170,
                    options: [
                    ]
                },
                {
                    type: 'select',
                    prop: 'merchantName',
                    placeholder: '分配商家',
                    width: 150,
                    options: [
                    ]
                },
            ],
            searchHandle: [
                {
                    label: '搜索',
                    type: 'success',
                    icon: 'el-icon-search',
                    handle: e => this.init()
                },
                {
                    label: '重置',
                    icon: 'el-icon-refresh-right',
                    handle: e => this.searchFromReset()
                }
            ],
            tableData: [
            ],
            tableCols: [
                {
                    label: '运维人员名称',
                    prop: 'name'
                },
                {
                    label: '设备类型',
                    prop: 'type',
                    formatter: e => e.type == 1 ? '生鲜柜' : e.type == 2 ? '组合柜' : e.type == 3 ? '自提柜' : ''
                },
                {
                    label: '设备编号',
                    prop: 'equipmentNo'
                },
                {
                    label: '分配代理商',
                    prop: 'regionalName'
                },
                {
                    label: '分配商家',
                    prop: 'merchantName',
                },
                {
                    label: '激活时间',
                    prop: 'activationTime'
                },
            ],
            tablePage: { limit: 10, page: 1, total: 0 },
            formData: {
                bannerName: "",
                bannerPic: "",
                pwd: "",
                devChose: "",
                isOnline: ""
            },
            formCols: [
                { type: "input", label: "广告名称", width: 350, prop: "bannerName", rmblock: true, remark: '广告名称只是作为辨别多个广告条目之用，并不显示在广告中' },
                { type: "upload", label: "广告素材", width: 200, prop: "bannerPic", remark: '只能上传jpg/png/MP4格式文件，文件不能超过50kb', rmblock: true },
                { type: "select", label: "选择设备", width: 350, prop: "devChose", options: [{ name: 'a', value: 'A设备' }] },
                { type: "switch", label: "上线/下线", width: 350, prop: "isOnline" },
            ],
            formRules: {
                nickName: [
                    { required: true, message: '请输入管理员名称', trigger: 'blur' },
                ],
                account: [
                    { required: true, message: '请输入登录账号', trigger: 'blur' },
                ],

                pwd: [
                    { required: true, message: '请输入登录密码', trigger: 'blur' },
                ],
                roleids: [
                    { required: true, message: '请选择角色', trigger: 'blur' },
                ],
            },
            formHandle: [
                {
                    label: "取消",
                    handle: e => this.elFormVisible(),
                },
                {
                    label: "确定",
                    type: "success",
                    handle: e => this.elFormSubmit(),
                },

            ],


        };
    },
    components: {},
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            let param = { ...this.searchData, ...this.tablePage }
            let res = await this.api.focuslist(param)
            if (res) {
                this.tablePage.total = res.data.total
                this.tableData = res.data.list
            }
            let operatorId = ''
            let resOpt = await this.api.getOperatorList({})
            if (resOpt) {
                operatorId = resOpt.data.operatorId
            }
            let resAgent = await this.api.getAgentList({
                userId: operatorId
            })
            let resMerchant = await this.api.getMerchantList({
                userId: operatorId
            })
            if (resAgent) {
                this.searchForm[3].options = []
                // this.searchForm[2].options = resAgent.data
                for (let i = 0; i < resAgent.data.length; i++) {
                    this.searchForm[3].options.push({
                        label: resAgent.data[i].name,
                        value: resAgent.data[i].name
                    })
                }
            }
            if (resMerchant) {
                this.searchForm[4].options = []
                for (let i = 0; i < resMerchant.data.length; i++) {
                    this.searchForm[4].options.push({
                        label: resMerchant.data[i].name,
                        value: resMerchant.data[i].name
                    })
                }
            }
        },
        elFormSubmit(e) {
            //查询
            console.log(e)
        },
        elFormDetail(row) {
            Object.keys(this.formData).forEach(key => {
                this.formData[key] = row[key]
            })
            this.formData.id = row.id;
            this.formData.cardId = row.cardId
            // if (this.formCols[1].label == '登录密码') {
            //     this.formCols.splice(1, 1)
            // }

            this.elFormVisible()
        },
    }
};
</script>
<style scoped lang='scss'>
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
